import React, { Component } from 'react'
import './index.sass'
import { getCity } from '../../../utils/auth'
export default class index extends Component {
  // 当前城市id
  cityId = getCity().value
  // 定时器id
  timerId = null
  state = {
    tipsList: []
  }
  handleSearch = e => {
    if (!e.target.value) {
      // 文本框的值为空
      return this.setState({
        tipsList: []
      })
    }
    // 清除上一次的定时器
    clearTimeout(this.timerId)
    this.timerId = setTimeout(async () => {
      // 获取小区数据
      const res = await this.$API.get('/area/community', {
        params: {
          name: e.target.value,
          id: this.cityId
        }
      })
      this.setState({
        tipsList: res
      })
    }, 500)
  }
  onTipsClick = item => {
    this.props.history.replace('/rent/add', {
      name: item.communityName,
      id: item.community
    })
  }
  render() {
    return (
      <div className="rent-search">
        <div className="search-box">
          <input type="text" placeholder="请输入小区或地址" onChange={this.handleSearch} />
          <div onClick={() => this.props.history.replace('/rent/add')}>取消</div>
        </div>
        <ul>
          {
            this.state.tipsList.map(i =>( 
              <li key={i.community} onClick={() => this.onTipsClick(i)}>
                {i.communityName}
              </li>
            ))
          }
        </ul>
      </div>
    )
  }
}
